<div class="row">
    <div class="col">
        <div class="card mb-3">
            <div class="card-body">
                <filter-list request="request" orders="orders" callback="getList(pageIndex)"
                    create-url="'/portal/attribute-set/create'" create-text="'Create Attribute'"></filter-list>
                <hr>
                <table class="table table-sm table-hover mb-0" cellspacing="0" ng-init="getList()">
                    <thead class="thead-light">
                        <tr>
                            <!-- <th scope="col" style="width: 3%;">
                            </th> -->
                            <th scope="col" style="width: 4%;">
                                <input type="checkbox" ng-model="selectedList.isSelectAll"
                                    ng-change="selectAll(selectedList.isSelectAll)" />
                            </th>
                            <th scope="col" style="width: 25%;">
                                Attribute
                            </th>
                            <th scope="col" width="20%">
                                Name
                            </th>
                            <th scope="col" width="10%">
                                Type
                            </th>
                            <th scope="col" width="15%">
                                Created Date
                            </th>
                            <th scope="col" style="width: 5%;"></th>
                        </tr>
                    </thead>

                    <tbody class="sortable">
                        <tr ng-repeat="item in data.items track by $index" class="sortable-item" sort-model="attribute-set"
                            sort-model-id="{{item.id}}">
                            <!-- <td style="cursor:move;" class="drag-header">
                                <small class="fa fa-grip-vertical text-black-50 align-middle"></small>
                            </td> -->
                            <td>
                                <input type="checkbox" ng-model="item.isSelected"
                                    ng-change="select(item.id, item.isSelected)" />
                            </td>
                            <td>
                                <small>{{item.title}}</small>
                            </td>
                            <td>
                                <small class="text-black-50">{{item.name}}</small>
                            </td>
                            <td>
                                <small class="text-black-50">{{item.model.type}}</small>
                            </td>
                            <td>
                                <small class="text-black-50">
                                    {{item.createdDateTime | utcToLocal}}
                                </small>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm btn-group-sm float-right" role="group"
                                    aria-label="Actions">
                                    <!-- <a class="btn btn-link" data-toggle="collapse" href="#attribute-childs" role="button"
                                aria-expanded="false" aria-controls="attribute-childs">
                                <i class="fas fa-folder"></i>
                            </a> -->
                                    <a href="/portal/attribute-set/details/{{item.id}}" title="Edit Attribute"
                                        class="btn btn-link text-primary">
                                        <span class="fas fa-pen"></span>
                                    </a>
                                    <a href="/portal/attribute-set-data/create?attributeSetId={{item.id}}&attributeSetName={{item.name}}&dataId=default"
                                        title="Add Data" class="btn btn-link text-primary">
                                        <span class="fas fa-plus"></span>
                                    </a>
                                    <a href="/portal/attribute-set-data/list?attributeSetId={{item.id}}&attributeSetName={{item.name}}"
                                        title="List Data" class="btn btn-link text-primary">
                                        <span class="fas fa-database"></span>
                                    </a>
                                    <a ng-click="remove(item.id);" class="btn btn-link text-danger">
                                        <span class="fas fa-trash-alt"></span>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div class="card-footer">
                <div class="form-group">
                    <select class="btn custom-select custom-select-sm col-3" ng-model="selectedList.action">
                        <option ng-repeat="item in actions" ng-value="item">{{item}}</option>
                    </select>

                    <a class="btn btn-sm btn-primary" ng-if="selectedList.data.length > 0 && selectedList.action"
                        ng-click="applyList()">Apply</a>
                </div>
                <paging class="small" page="request.pageIndex + 1" page-size="request.pageSize"
                    total="request.totalItems" ul-class="pagination justify-content-end m-0" a-class="page-link"
                    paging-action="getList(page-1)" scroll-top="true">
                </paging>
            </div>
        </div>
    </div>
</div>